<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的奖品</title>
    <link rel="stylesheet" href="common/iconfont/iconfont.css">
    <link rel="stylesheet" href="common/css/common.css">
    <link rel="stylesheet" href="common/css/my.css">
    <!-- 移动端适配 -->
    <script>
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize', changeRem);

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            //console.log( width );
            html.style.fontSize = width / 10 + 'px';
        }
    </script>

    <body>
        <div id="wrap">
            <ul class="main"></ul>
        </div>

        <script src="common/js/jquery.min.js"></script>
        <script>
            let myPrize = [{
                "key": "123",
                "value": "1",
                "text": "YES拿铁一杯",
                "imgs": "./zhuanpan/image/1.png"
            }, {
                "key": "123",
                "value": "3",
                "text": "意式咖啡一杯",
                "imgs": "./zhuanpan/image/1.png"
            }, ]
            var $list = $(".main"); //获得的奖品
            $.ajaxSettings.async = false;
            $.each(myPrize, function(k, v) {
                var $dom = $("<li>" +
                    "<a href='javascript:void(0)'>" +
                    "<img src='" + v.imgs + "'>" +
                    "<div>" +
                    "<p>恭喜您获得了<span id='text'>" + v.text + "</span></p>" +
                    "<i class='iconfont icon-youjiantou-01'></i>" +
                    "</div>" +
                    "</a>" +
                    +"</li>");
                $list.append($dom);
            })
        </script>
    </body>

</html>